<template>
  <el-tabs type="border-card">
    <el-tab-pane v-for="tab in tabs">
      <template #label>
        <span class="tabs-label-span">
          <el-icon><component :is="tab.icon" /></el-icon>
          <span>{{ tab.label }}</span>
        </span>
      </template>
      <router-view></router-view>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import {DataAnalysis, Tickets} from "@element-plus/icons-vue";
import {reactive} from "vue";

const tabs = reactive(
    [
        {
            label: 'Readme',
            icon: Tickets
        },
        {
            label: 'Start',
            icon: DataAnalysis
        }
    ]
)

</script>

<style scoped >

.el-tabs > .el-tabs__content {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: beige;
}

.el-tabs .is-top {
}


.el-tabs .tabs-label-span .el-icon {
  vertical-align: middle;
}

.el-tabs .tabs-label-span span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>